<!DOCTYPE html>
<html>
<head>
  	<meta charset="UTF-8">
  	<title></title>
  	<script src="5.6.js"></script>
 	 <script>
 		function $$(id) {
  			return document.getElementById(id);
  		}   
  		window.onload=function(){
   			var cnv = $$("canvas");
   			var cxt = cnv.getContext("2d");
    	
   	    	window.setInterval(function(){
	    		cxt.clearRect(0,0,cnv.width,cnv.height);
	    		var d=new Date();
	    		
	    		
	    		var h=d.getHours();
	    		var h1=Math.floor(h%10);
	    		var h10=Math.floor(h/10);
	    		drawDigit(cxt,h10,0);
				drawDigit(cxt,h1,7);
				
				drawDigit(cxt,"colon",14);
				
				var m=d.getMinutes();
	    		var m1=Math.floor(m%10);
	    		var m10=Math.floor(m/10);
	    		drawDigit(cxt,m10,18);
				drawDigit(cxt,m1,25);
				
				drawDigit(cxt,"colon",32);
				
				var s=d.getSeconds();
	    		var s1=Math.floor(s%10);
	    		var s10=Math.floor(s/10);
	    		drawDigit(cxt,s10,36);
				drawDigit(cxt,s1,43);
				
	    	},1000)  
	    }
</script>
</head>
<body>
  	<canvas id="canvas" width="1200" height="600" style="border: 1px dashed gray;"></canvas>
</body>
</html>